<template>
    <div class="comp-set-phone">
        <modal :show="true">
            <validator :rules="rules" :parent="_self">
                <form class="m-form-dialog" name="form" action="javascript:;">
                    <div class="modal-header">
                        <a href="javascript:;" class="close" @click="hide"><span>×</span></a>
                        <span class="modal-title">{{$t('common.comp.setPhone.title')}}</span>
                    </div>
                    <div class="modal-body">
                        <div class="col-row fn-gray">
                            {{$tc('common.comp.setPhone.tip',2)}}
                        </div>
                        <div class="col-row">
                            <div class="col-label">
                                <label>{{$t('common.comp.setPhone.phone')}}</label>
                            </div>
                            <div class="col-input">
                                <input type="text"
                                       tabindex="1"
                                       class="fn-block"
                                       :placeholder="$t('common.comp.setPhone.placeholder')"
                                       autocomplete="off"
                                       id="phone"
                                       name="phone"
                                       v-model="form.phone">
                                <div class="ui-tip"></div>
                            </div>
                        </div>
                        <div class="col-row">
                            <div class="col-label">
                                <label for="verifyCode">{{ $t('common.pVerification') }}</label>
                            </div>
                            <div class="col-input">
                                <div class="comp-verify-code">
                                    <a href="javascript:;" class="ui-btn ui-btn--gray ui-btn--block" v-if="!REG_PHONE.test(form.phone)"
                                        @click="checkPhone()">{{$t('common.sendEmail')}}</a>
                                </div>
                                <verify-code :on-success="onSendSuccess"
                                             :on-fail="onSendFail"
                                             :sendType="'PHONE'"
                                             :sendAccount="form.phone"
                                             v-if="REG_PHONE.test(form.phone)"></verify-code>
                                <input type="text"
                                       tabindex="2"
                                       class="input input--small"
                                       autocomplete="off"
                                       id="verifyCode"
                                       name="identifyingCode"
                                       maxlength="6"
                                       :placeholder="$t('common.pVerification')"
                                       v-model="form.identifyingCode">
                                <div class="ui-tip"></div>
                            </div>
                        </div>
                    </div>


                    <div class="modal-footer">
                        <div class="col-row">
                            <div class="col-label">
                                <label>&nbsp;</label>
                            </div>
                            <div class="col-text">
                                <div class="btn-group">
                                    <button type="submit"
                                            class="ui-btn binds"
                                            v-if="isRequesting === false"
                                            @click="submit()">{{ $t('common.confirm') }}</button>
                                    <button type="submit"
                                            class="ui-btn"
                                            disabled
                                            v-if="isRequesting === true">{{ $t('common.waiting') }}...
                                    </button>
                                    <a href="javascript:;"
                                       class="btn-cancel"
                                       @click="hide">{{ $t('common.cancel') }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </validator>
        </modal>
    </div>
</template>

<script type="text/babel">

    import Vue from "vue";
    import Modal from "../../grsc-base/component/Modal.vue";
    import Validator from '../../grsc-base/component/Validator/main';
    import commonService from '../common/commonService';
    import {REG_PHONE} from '../../grsc-base/common/constants';
    import VerifyCode from '../component/VerifyCode.vue';

    export  default Vue.extend({
        data(){
            return {
                form: {
                    phone:'',
                    identifyingCode: ''
                },
                rules: {
                    phone: {
                        required: true,
                        pattern:REG_PHONE,
                        patternTip: this.$t('common.comp.setPhone.pattenTip'),
                        requiredTip: this.$t('common.comp.setPhone.requiredTip')
                    },
                    identifyingCode: {
                        required: true,
                        requiredTip: this.$t('common.verifyCodeRequireTip'),
                        pattern: '\\d{6}',
                        patternTip: window.CODE.IDENTIFY[this.$i18n.locale]
                    }
                },
                isRequesting: false,
                REG_PHONE:REG_PHONE
            }
        },
        props: {
            onHide: {
                type: Function,
                default(){
                }
            },
            successCbfn: Function,
            default(){

            }
        },
        computed: {},
        components: {
            'modal': Modal,
            Validator,
            VerifyCode
        },
        created() {

        },
        methods: {

            onSendSuccess() {
                this.rules.identifyingCode.$setRight(this.$t('common.codeSentTip'));
            },
            onSendFail(rep) {
                this.rules.identifyingCode.$setError(rep.msg);
            },

            checkPhone(){
                if(!REG_PHONE.test(form.phone)){
                    this.rules.phone.$setError(this.$t('common.comp.setPhone.pattenTip'));
                }
            },
            submit(){
                if (this.rules.$checkAll() === false) {
                    return;
                }
                let param = {
                    phone:this.form.phone
                };

                let header = {
                    'service-code': this.form.identifyingCode
                };

                this.isRequesting = true;
                commonService.setPhone(param,header).done(rep=> {
                    if (rep.code === window.CODE.SUCCESS) {
                        this.successCbfn && this.successCbfn()
                        this.$emit('success', this.form.phone);
                        this.hide();
                        window.success(this.$t('common.success'));
                    }else if(rep.code === window.CODE.IDENTIFY.CODE){
                        this.rules.identifyingCode.$setError(window.CODE.IDENTIFY[this.$i18n.locale]);
                    }else {
                        window.error(rep.msg);
                    }
                }).always(() => {
                    this.isRequesting = false;
                })
            },
            hide(){
                this.$emit('hide');
            }
        }
    })
</script>

<style lang="sass" rel="stylesheet/scss">
    .comp-set-phone{
        .input--small{
            width: 120px;
        }
    }
</style>